<script setup lang="ts">
const IS_ELECTRON = process.env.IS_ELECTRON
</script>

<template>
  <div class="h-full flex">
    <div class="space-y-4 h-full py-4 px-2 bg-green-400 border-r border-gray-300 flex flex-col text-lg font-bold">
      <div
        v-for="(item, i) in $router.getRoutes().filter((item) => item.meta.title)"
        :key="i"
        class="transition cursor-pointer rounded p-2 min-w-10 min-h-10 flex items-center hover:text-gray-500"
        :class="[{ 'bg-gray-400/50': $route.path === item.path }, { 'justify-center': IS_ELECTRON }]"
        :title="IS_ELECTRON ? $t(item.meta.title + '') : ''"
        @click="$router.push(item.path)"
      >
        <div class="w-8 h-8 flex justify-center items-center">
          <img :src="$require(item.meta.title + '.png')" />
        </div>
        <div v-if="!IS_ELECTRON" class="text-sm px-3 whitespace-nowrap">{{ $t(item.meta.title + '') }}</div>
      </div>
    </div>
    <router-view />
  </div>
</template>
